<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--sweetalert2-->
    <link href="./sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="./sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
</head>
<body>

<button id="btn" onclick="fun()">保存</button>


<template id="my-template">
    <swal-title>
        Save changes to "Untitled 1" before closing?
    </swal-title>
    <swal-icon type="warning" color="red"></swal-icon>
    <swal-button type="confirm">
        Save As
    </swal-button>
    <swal-button type="cancel">
        Cancel
    </swal-button>
    <swal-button type="deny">
        Close without Saving
    </swal-button>
    <swal-param name="allowEscapeKey" value="false" />
    <swal-param
            name="customClass"
            value='{ "popup": "my-popup" }' />
</template>

<script>

    function fun(){

        Swal.fire({
            template: '#my-template'
        }).then(function (data){
            console.log(data)
        })

    }


</script>
</body>
</html>